<template>
	<view style="background-color: #F5F5F5; min-height: 100%;">
		<u-navbar title="空间地图" :is-back="false" title-size="36" title-color="#333333"></u-navbar>
		<view class="map-container" v-if="mapStatus" key="map">
			<view class="map_tips">
				<image class="information" src="../../static/header/information.png" mode=""></image>仅可查看附近3KM范围内的泡泡空间
			</view>
			<map class="map" 
				id="map1"
				ref="map1"
				v-if="latitude && longitude"
				:show-location="true" 
				:enable-poi="true"
				:show-compass="false"
				:latitude="latitude" 
				:longitude="longitude" 
				@markertap="markertap"
				:scale="12" 
				:enable-zoom="true" 
				:markers="markers"></map>
			<view style="position: fixed; bottom: 32rpx; left: 32rpx;">
				<button type="default" @click="onPoint" class="pointAddress">
					<image src="../../static/header/map_point.png" mode=""></image>
				</button>
			</view>
		</view>
		<view v-else key="map" class="map-empty">
			<empty type="address" @onReload="onReload" buttonText="获取当前位置"></empty>
		</view>
		
		<lff-barrage ref="lffBarrage" style="position: absolute;top: 0;left: 0;width: 100%;z-index: 99;"></lff-barrage>
		<!-- <button type="default" @click="colrdo">12121</button> -->
		
		<space class="mapSpace" :spaceDetail="spaceDetail" @onClick="onDetail(spaceDetail)" v-if="popupStatus">
			<template slot="close">
				<i class="icon_close" @click.stop="popupClose"></i>
			</template>
		</space>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import empty from '../../components/empty.vue'
	import space from '../../components/space.vue'
	import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
	import location from '../../common/js/location.js'
	import UserLogin from '@/common/js/login'
	import storage from '@/common/js/storage';
	export default {
		mixins: [location, UserLogin],
		data() {
			return {
				mapIcon: require('../../static/header/icom_map.png'),
				mapStatus: true,
				latitude: null,
				longitude: null,
				popupStatus: false,
				markers: [],
				myPaoPaoRespVOList: [],
				mySpaceRespVOList: [],
				spaceDetail: {}
			};
		},
		components: {
			empty,
			space,
			lffBarrage
		},
		computed: {
			...mapState(["addressInfo", 'authLocation'])
		},
		onLoad() {
			this.initCurrentUser()
			this.onLocation(this.setAddress)
		},
		methods: {
			async onPoint() {
				uni.showLoading()
				let mpCtx = uni.createMapContext('map1', this)
				await mpCtx.moveToLocation();
				uni.hideLoading()
			},
			onDetail(item) {
				uni.showLoading()
				this.$u.route('/pages/mySpace/spaceDetail', {
					id: item.id
				})
			},
			colrdo(item){ //插入一条弹幕
				this.$refs.lffBarrage.add({item: item.name, url: item.url});
			},
			getSpaceMap(params) {
				this.$u.get('/paopao/mini/space/querySpaceMap', params).then(res => {
					if(res && res.status == -1) { return }
					this.myPaoPaoRespVOList = res.myPaoPaoRespVOList || []
					this.mySpaceRespVOList = res.mySpaceRespVOList || []
					this.mySpaceRespVOList.forEach(item => {
						let marker = this.createMarker({
							url: item.roundSpaceImgUrl,
							address: item.address,
							latitude: item.lat,
							longitude: item.lng,
							id: item.id
						})
						this.markers.push(marker)
					})
					
					if(this.myPaoPaoRespVOList.length > 0) {
						this.myPaoPaoRespVOList.forEach((item, index) => {
							setTimeout(() => {
								this.colrdo({
									name: item.bubbleContent,
									url: item.avatar
								})
							}, index * 3000)
						})
					}
				})
			},
			createMarker(point) {
				let marker = {
					iconPath: point.url,  //地图上的图标可以写网络路径
				    id: point.id || 0,
				    name: point.address || '',
				    latitude: point.latitude,
				    longitude: point.longitude,
				 //    callout: {
					// 	padding: 1,
					//     bgColor: "#4f5d73",
					//     color: "#FFFFFF",
					//     display: "ALWAYS",
					//     borderRadius: 2,
					// },
				    width: point.width || 48,
				    height: point.width || 48,
				};
				return marker;
			},
			popupClose() {
				this.popupStatus = false
				this.markers.forEach(item => {
					item.width = 48
					item.height = 48
				})
			},
			markertap(e) {
				let id = e.markerId
				this.mySpaceRespVOList.forEach(item => {
					if(item.id == id) {
						this.spaceDetail = item
						this.popupStatus = true
					}
				})
				
				this.markers.forEach(marker => {
					if(id == marker.id) {
						marker.width = 58
						marker.height = 58
					}
				})
			},
			async setAddress() {
				let _this = this
				let authLocation = uni.getStorageSync('authLocation')
				if(authLocation == 1) {
					this.geo((res) => {
						console.log(res)
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						res.url = 'https://www.hesongzhineng.com/img/javafile/20210821104212-f2709080-7daf-44c6-a98f-0e95cdd20d86.png'
						let marker = _this.createMarker(res)
						_this.markers.push(marker)
						_this.getSpaceMap({
							lat: res.latitude,
							lng: res.longitude
						})
						
					})
				} else {
					this.getAuthLocation()
				}
			},
			initCurrentUser() {
			    let currentUser = storage.get('userInfo');
				if(currentUser) {
					this.$store.commit('setUserInfo')
				}
			},
		}
	}
</script>

<style lang="less" scoped>
@import url("../../common/css/var.less");
.map, .map-empty {
	width: 100%;
	height: calc(100vh - 44px - var(--status-bar-height));
}
.map-empty {
	display: flex;
	align-items: center;
	justify-content: center;
}
.map-container {
	position: relative;
	.map_tips {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 0;
		top: 0;
		font-size: 28rpx;
		height: 80rpx;
		background-color: #FFFAD3;
		text-align: center;
		color: #FF7B02;
		width: 100%;
		z-index: 99;
		.information {
			width: 48rpx;
			height: 48rpx;
			margin-right: 24rpx;
		}
	}
}
.mapSpace {
	position: absolute;
	left: 0;
	bottom: 80rpx;
	.icon_close {
		position: absolute;
		top: 0;
		right: 0;
		width: 80rpx;
		height: 80rpx;
		background: url(../../static/header/icon_close.png) no-repeat center;
		background-size: contain;
	}
}
.pointAddress {
	width: 80rpx;
	height: 80rpx;
	border-radius: 8rpx;
	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff !important;
	image {
		width: 48rpx;
		height: 48rpx;
	}
}
</style>
